<template>
  <div class="exchange-wrapper">
    <search @search="init"
            v-model="postData.p"></search>
    <div class="goods-wrapper">
      <!-- <vue-waterfall-easy v-if="imgsArr.length > 0"
                          ref="waterfalls"
                          :imgsArr="imgsArr"
                          :width="waterfallWidth"
                          :mobileGap="10"
                          :loadingDotStyle="loadingDotStyle"
                          @scrollReachBottom="getData(postData.title)"
                          @click="handleWatchEvent"> -->
      <van-list v-if="imgsArr.length > 0"
                class="point-goods-list"
                v-model="loading"
                :finished="finished"
                :error.sync="error"
                error-text="请求失败，点击重新加载"
                :immediate-check="false"
                finished-text=""
                @load="onLoad">
        <div class="point-goods-con" v-for="(goods,index) in imgsArr" :key="index" @click="openLink(goods.link_item)">
          <div class="goods-img">
            <img :src="goods.pic_url" alt="">
          </div>
          <div class="goods-info">
            <div class="goods-title">
              <span class="fontZiy" v-if="goods.is_self_support == 1">自营</span>{{goods.title}}
            </div>
            <div class="goods-points">
              <em class="fontGilroy">{{goods.points}}</em>{{point_name}}
            </div>
          </div>
        </div>
      </van-list>
      <!-- </vue-waterfall-easy> -->
      <div v-else>
        <no-data :noData=noData></no-data>
      </div>
    </div>
  </div>
</template>

<script>
import { getPointExchangeInfo } from '@/api/user/member/memberApi'
import search from './search/index'
// import vueWaterfallEasy from 'vue-waterfall-easy'
import noData from '@/components/noData/index'
// import noOrderImg from '@img/no_order.png'
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { mpShare } from '@/utils/utils'
import small from '@/smallapp/small'
export default Vue.extend({
  name: 'index',
  components: {
    // vueWaterfallEasy,
    search,
    noData
  },
  data() {
    return {
      waterfallWidth: '',
      noData: {
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_order.png',
        text: '暂无数据',
        marginTop: '120px'
      },
      point_name: '积分',
      imgsArr: [
        /* {
          is_compress: 0,
          pic_url: 'http://img.wifenxiao.com/16/79/6/2019-10/5da3e512afbec.gif',
          title: '商品名称',
          points: '10'
        } */
      ],
      postData: {
        p: 1,
        title: ''
      },
      loading: false,
      finished: false,
      error: false,
      // loadingDotStyle: {
      //   background: '#e43'
      // }
    }
  },
  methods: {
    openLink(link){
      openPage(link)
    },
    //vant-list加载更多
    init(keyword){
      this.$loadingWrap.show() // 打开loading
      setTimeout(() => {
        this.$loadingWrap.close() // 关闭loading
      }, 1000)
      this.postData.title = keyword
      this.postData.p = 1
      this.finished = false
      getPointExchangeInfo(this.postData).then(res => {
        this.listLoading = false
        if (res.status === 1) {
          this.point_name = res.data.point_name
          const pageTitle = this.point_name + '兑换商品'
            wx.setNavigationBarTitle({
             title: pageTitle
            })
          this.imgsArr = res.data.lists
          this.postData.p++
          const sid = small.globalData.shopId
          const pid = small.wxCache('global_login_info') ? small.wxCache('global_login_info').uid : '0'
          const option = {
            title: pageTitle,
            shareParam: `sid=${sid}&pid=${pid}`,
          }
          mpShare (true, true, '/user/pages/pointExchange/index', option, '/pointExchange')
        }
      })
    },
    onLoad() {
      this.loading = true
      getPointExchangeInfo(this.postData)
        .then(res => {
          this.loading = false
          if (res.data.lists && res.data.lists.length) {
            this.imgsArr.push(...res.data.lists)
            this.postData.p++
            // console.log(this.imgsArr)
          } else {
            this.finished = true
          }
        })
        .catch(() => {
          this.loading = false
          this.error = true
        })
    }
  },
  created() {
    this.init()
  },
  mounted() {
    // 小程序触底加载更多
    window.addEventListener('reachbottom', () => {
      this.onLoad()
    })
  }
})
</script>
<style lang="scss">
@import "../../../../styles/mixin";
.miniprogram-root {
  .van-list__error-text,.van-list__finished-text,.van-list__loading {
    width: 100%;
  }
}
.exchange-wrapper {
  .vue-waterfall-easy-container {
    .vue-waterfall-easy {
      a {
        &.img-inner-box {
          box-shadow: none !important;
          border-radius: 10px !important;
          background: #fff;
          border: 1px solid #f5f5f5;
          overflow: hidden;
        }
      }
    }
  }
  .goods-wrapper {
    // height: calc(100vh - 102px);
    padding: 10px;
  }
  .point-goods-list{
    display:flex;
    justify-content: space-between;
    flex-wrap:wrap;
    padding:10px;
  }
  .point-goods-con{
    overflow:hidden;
    width:345px;
    margin-bottom:20px;
    border-radius:10px;
    background:#fff;
  }
  .goods-img{
    overflow:hidden;
    width:345px;
    height:345px;
    img{
      display:block;
      width:100%;
    }
  }
  .goods-info {
    padding: 14px 14px 22px;
    .goods-title {
      @include lineClamp(26px, 1.5, 2);
    }
    .goods-points {
      margin-top: 14px;
      color: #F20C23;
      font-size: 28px;
      em {
        display:inline;
        margin-right: 4px;
        font-size: 30px;
      }
    }
  }
}
</style>